<template>
    <div style="padding: 0px 0 0 0;">
     
        <component :is="wrapper ? wrapper  : Card">
            <a-form :labelCol="{ style: { width: '100px' } }" layout='inline' style="width: 100%; display: block;">
                <a-row :gutter="[24, 24]">
                    <slot name="formItem"></slot>
                </a-row>
            </a-form>
        </component>
        <div style="height: 20px;"></div>
        <component :is="wrapper ? wrapper : Card">
            
            <div  style="padding: 0 0 20px 0;">
                <slot v-if="$slots.bodyHeader" name="bodyHeader"></slot>
                <a-button v-else @click="toAdd" type="primary">新增</a-button>
            </div>
            <my-table :dataSource="dataSource" :columns="columns" :rowKey="rowKey" bordered size="small" style=""
                :loading="loading" :scroll="scroll" 
                :row-selection="rowSelection" 
                :pagination="pagination" @change="tableChange">
                <template #bodyCell="{ index, column, record }">
                    <slot name="bodyCell" :index="index" :column="column" :record="record"></slot>
                </template>
            </my-table>
        </component>
    </div>
</template>

<script setup lang="ts">
import { h, onMounted, type VNode } from 'vue';
import { Card } from 'ant-design-vue';
const props = withDefaults(defineProps<{
    dataSource: any[],
    columns: any[],
    rowKey?: string,
    loading: boolean,
    scroll?: any,
    pagination?: any,
    wrapper?: VNode,
    rowSelection?: any
}>(), {
    rowKey: 'id',
    scroll: () => {
        return { x: 800 }
    },
    pagination: () => {
        return {
            current: 1,
            pageSize: 10,
            total: 0,
            // showSizeChanger: true, // 显示 pageSize 切换器
        }
    },
    
})




const emit = defineEmits<{
    change: [any],
    add: []
}>()
const toAdd = () => {
    emit('add')
}
const tableChange = (e: any) => {
    emit('change', e)
}

onMounted(() => {
    console.log(props.wrapper)
})
</script>

<style scoped></style>